<template>
    <div class="header">
        <div class="header-left">
            <span class="iconfont back">&#xe600;</span>
        </div>
        <div class="header-input"><span class="iconfont">&#xe616;</span>输入城市/景点/游玩主题</div>
        <router-link to="/city">
           <div class="header-right">
            <span @click="cityClick()">{{this.getCity}}<span class="iconfont" v-bind:class="{ active: isActive }">&#xe688;</span></span>
              <!-- <div class="drop-down" v-if="showList">
                <a href="#" v-for="item of citylist" :key="item.id">{{item.name}}</a>
              </div> -->
        </div>
        </router-link>
    </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'Header',
  props: {
    citylist: Array
  },
  data () {
    return {
      showList: false,
      isActive: false
    }
  },
  computed: {
    // 把vuex里面的city映射到计算属性中，方便调用，this.$store.state.city优化为this.city
    // ...是展开运算符
    // ...mapState([currentCity: 'city'])两种写法 调用：this.currentCity
    ...mapState(['city']),
    ...mapGetters(['getCity'])
  },
  methods: {
    cityClick () {
      // eslint-disable-next-line no-unneeded-ternary
      this.showList = this.showList === false ? true : false
      // eslint-disable-next-line no-unneeded-ternary
      this.isActive = this.isActive === false ? true : false
    }
  }
}
</script>

<style scoped>
.header{
    display:flex;
    height: 2.8rem;
    line-height:2.8rem;
    background-color: #00bcd4;
}
 .header-left{
    width: 3rem;
    float: left;
    color:#fff;
}
.header-input{
    flex: 1;
    height: 2rem;
    line-height: 2rem;
    margin-top: 0.4rem;
    background-color: #fff;
    border-radius: 0.3rem;
    text-align: left;
    color: #ccc;
    font-size: 0.9rem;
    text-indent: 0.6em;
}
.header-right{
    min-width: 4rem;
    float: right;
    color:#fff;
    padding: 0 0.4rem;
}
.back{
    font-size: 20px!important;
    font-weight: bolder;
}
</style>
